<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../pages/template.xhtml">
	<ui:define name="head">
		<title>#{msg.expediente}-
			#{expedienteBean.usuarioSelecionado.nombre}
			#{expedienteBean.usuarioSelecionado.apellidos}</title>
		<script type="text/javascript">
			function editarCampos() {
				document.getElementById('botonCancelar').style.display = 'block';
				document.getElementById('botonGuardar').style.display = 'block';
				document.getElementById('observaciones').style.display = 'block';
				document.getElementById('labelObservaciones').style.display = 'none';
				document.getElementById('linkObservaciones').style.display = 'none';
			}
		</script>
		<script type="text/javascript">
			function ocultarCompos() {
				document.getElementById('botonCancelar').style.display = 'none';
				document.getElementById('botonGuardar').style.display = 'none';
				document.getElementById('observaciones').style.display = 'none';
				document.getElementById('labelObservaciones').style.display = 'block';
				document.getElementById('linkObservaciones').style.display = 'block';
			}
		</script>
		<script type="text/javascript">
			function editarCamposSituacion() {
				document.getElementById('situacionEd').style.display = 'block';
				document.getElementById('editarSituacion').style.display = 'none';
				document.getElementById('detalleSituacionTabla').style.display = 'none';
			}
		</script>
		<script type="text/javascript">
			function editarCamposPerfil() {
				document.getElementById('edDetallePerfil').style.display = 'block';
				document.getElementById('editarperfil').style.display = 'none';
				document.getElementById('detallePerfilTabla').style.display = 'none';
			}
		</script>
		<script type="text/javascript">
			function editarCamposFamiliar() {
				document.getElementById('editarDetalleInformacionFamiliar').style.display = 'block';
				document.getElementById('detalleInformacionFamiliar').style.display = 'none';
				document.getElementById('editarinformacion').style.display = 'none';
			}
		</script>
	</ui:define>
	<ui:define name="left"></ui:define>
	<ui:define name="center">
		<h:form prependId="false" styleClass="formPrincipal">
			<p:growl id="msgs" showDetail="true" />
			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="../images/loading.gif" />
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<p:panel id="nuevoexpediente"
				rendered="#{expedienteBean.usuarioSelecionado.expedientes==null or empty expedienteBean.usuarioSelecionado.expedientes}"
				header="#{msg.expedienteDe}: #{expedienteBean.usuarioSelecionado.nombre} #{expedienteBean.usuarioSelecionado.apellidos}">
				<h:panelGrid columns="2">
					<h:outputLabel value="#{msg.numero}:"></h:outputLabel>
					<p:inputText value="#{expedienteBean.nuevoExpediente.numero}"></p:inputText>
					<h:outputLabel value="#{msg.observaciones}:"></h:outputLabel>
					<p:inputTextarea style="width:600px"
						value="#{expedienteBean.nuevoExpediente.observaciones}"></p:inputTextarea>
					<p:commandButton value="#{msg.registrarExpediente}"
						action="#{expedienteBean.addExpediente}" update="@form">
					</p:commandButton>
				</h:panelGrid>
			</p:panel>
			<p:panel id="expediente"
				rendered="#{expedienteBean.usuarioSelecionado.expedientes!=null and not empty expedienteBean.usuarioSelecionado.expedientes}"
				header="#{msg.expedienteDe}: #{expedienteBean.usuarioSelecionado.nombre} #{expedienteBean.usuarioSelecionado.apellidos}">
				<h:panelGrid columns="2">
					<h:outputLabel value="#{msg.numero}: "></h:outputLabel>
					<h:outputLabel
						value="#{expedienteBean.usuarioSelecionado.expedientes[0].numero}"></h:outputLabel>
				</h:panelGrid>
				<h:panelGrid columns="4">
					<h:outputLabel value="#{msg.observaciones}:"
						rendered="#{expedienteBean.usuarioSelecionado.expedientes[0].observaciones !=null}"></h:outputLabel>
					<h:outputLabel id="labelObservaciones"
						rendered="#{expedienteBean.usuarioSelecionado.expedientes[0].observaciones !=null}"
						value="#{expedienteBean.usuarioSelecionado.expedientes[0].observaciones}"></h:outputLabel>
					<p:commandLink value="#{msg.editarObservaciones}"
						id="linkObservaciones" onclick="editarCampos();"></p:commandLink>
					<p:inputTextarea style="width:600px;display:none;"
						id="observaciones" widgetVar="observaciones"
						value="#{expedienteBean.usuarioSelecionado.expedientes[0].observaciones}"></p:inputTextarea>
				</h:panelGrid>
				<h:panelGrid columns="2">
					<p:commandButton value="#{msg.guardar}" id="botonGuardar"
						widgetVar="botonGuardar" style="display:none;"
						action="#{expedienteBean.updateExpediente}"
						update="expediente,msgs">
					</p:commandButton>
					<p:commandButton value="#{msg.cancelar}" id="botonCancelar"
						widgetVar="botonCancelar" style="display:none;"
						update="expediente" onclick="ocultarCompos();">
					</p:commandButton>
				</h:panelGrid>
			</p:panel>
			<p:accordionPanel autoHeight="550" id="informacion"
				rendered="#{expedienteBean.usuarioSelecionado.expedientes!=null and not empty expedienteBean.usuarioSelecionado.expedientes}">
				<p:tab title="#{msg.informacionFamiliar}" id="informacionFamiliar">
					<ui:include src="informacionFamiliar.xhtml"></ui:include>
				</p:tab>
				<p:tab title="#{msg.situacionAlojamiento}" id="situacionAlojamiento">
					<ui:include src="situacionAlojamiento.xhtml"></ui:include>
				</p:tab>
				<p:tab title="#{msg.perfilLaboral}">
					<ui:include src="perfilLaboral.xhtml"></ui:include>
				</p:tab>
				<p:tab title="#{msg.historialPenal}" id="historialPenal">
					<ui:include src="historialPenal.xhtml"></ui:include>
				</p:tab>
			</p:accordionPanel>
			<!-- Eliminar historial penal -->
			<p:confirmDialog message="#{msg.eliminarDatosPenales}"
				widgetVar="dlgEliminarHisorial" id="dlgEliminarHisorial"
				header="#{msg.confirmacion}" modal="true">
				<h:panelGrid columns="2">
					<p:commandButton update="@form"
						action="#{historialPenalBean.eliminarHistorial}" value="#{msg.si}"
						oncomplete="dlgEliminarHisorial.hide();"></p:commandButton>
					<p:commandButton value="#{msg.no}"
						oncomplete="dlgEliminarHisorialr.hide();"></p:commandButton>
				</h:panelGrid>
			</p:confirmDialog>
			<!-- Eliminar familiar -->
			<p:confirmDialog message="#{msg.eliminarFamiliar}"
				widgetVar="dlgEliminar" id="dlgEliminar"
				header="#{msg.confirmacion}" modal="true">
				<h:panelGrid columns="2">
					<p:commandButton update="@form"
						action="#{informacionFamiliarBean.eliminarFamiliar}"
						value="#{msg.si}" oncomplete="dlgEliminar.hide();"></p:commandButton>
					<p:commandButton value="#{msg.no}" oncomplete="dlgEliminar.hide();"></p:commandButton>
				</h:panelGrid>
			</p:confirmDialog>
			<!-- Eliminar Idioma -->
			<p:confirmDialog message="#{msg.eliminarIdioma}"
				widgetVar="dlgEliminarIdioma" id="dlgEliminarIdioma"
				header="#{msg.confirmacion}" modal="true">
				<h:panelGrid columns="2">
					<p:commandButton update="@form"
						action="#{perfilLaboralBean.eliminarIdioma}" value="#{msg.si}"
						oncomplete="dlgEliminarIdioma.hide();"></p:commandButton>
					<p:commandButton value="#{msg.no}"
						oncomplete="dlgEliminarIdioma.hide();"></p:commandButton>
				</h:panelGrid>
			</p:confirmDialog>
			<!-- Eliminar formacion -->
			<p:confirmDialog message="#{msg.eliminarFormacion}"
				widgetVar="dlgEliminarFormacion" id="dlgEliminarFormacion"
				header="#{msg.confirmacion}" modal="true">
				<h:panelGrid columns="2">
					<p:commandButton update="@form"
						action="#{perfilLaboralBean.eliminarFormacion}" value="#{msg.si}"
						oncomplete="dlgEliminarFormacion.hide();"></p:commandButton>
					<p:commandButton value="#{msg.no}"
						oncomplete="dlgEliminarFormacion.hide();"></p:commandButton>
				</h:panelGrid>
			</p:confirmDialog>
			<!-- Eliminar experiencia -->
			<p:confirmDialog message="#{msg.eliminarExperiencia}"
				widgetVar="dlgEliminarExperiencia" id="dlgEliminarExperiencia"
				header="#{msg.confirmacion}" modal="true">
				<h:panelGrid columns="2">
					<p:commandButton update="@form"
						action="#{perfilLaboralBean.eliminarExperiencia}"
						value="#{msg.si}" oncomplete="dlgEliminarExperiencia.hide();"></p:commandButton>
					<p:commandButton value="#{msg.no}"
						oncomplete="dlgEliminarExperiencia.hide();"></p:commandButton>
				</h:panelGrid>
			</p:confirmDialog>
		</h:form>
	</ui:define>
</ui:composition>